<script setup lang="ts">
import {darkTheme, dateZhCN, lightTheme, NConfigProvider, zhCN} from 'naive-ui';
import {useAppearanceSettingStore} from "@/store/modules/appearance-setting";
import type { GlobalThemeOverrides } from 'naive-ui';
import { lighten } from '@/utils/color-util';

defineOptions({
  name: 'App',
});

const theme = computed(() => {
  return useAppearanceSettingStore().getDarkTheme ? darkTheme : lightTheme;
})
const themeOverrides: ComputedRef<GlobalThemeOverrides> = computed<GlobalThemeOverrides>(() => {
  const appTheme = useAppearanceSettingStore().appTheme;
  const borderRadius = useAppearanceSettingStore().borderRadius;
  const lightenStr = lighten(appTheme, 6);

  return {
    common: {
      primaryColor: appTheme,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
      primaryColorSuppl: appTheme,
      borderRadius: `${borderRadius}`,
    },
    LoadingBar: {
      colorLoading: appTheme,
    },
  };
});
</script>

<template>
  <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="themeOverrides">
    <RouterView/>
  </NConfigProvider>
</template>
